
// {bem_b}
@use "./mixin/mixins.scss" as *;
@use './mixin/function.scss' as *;
@import "common/index.scss";

$e-number-keyboard-background-color: rgb(224, 228, 230) !default;
$e-number-keyboard-padding: 8px 10rpx 8px 10rpx !default;
$e-number-keyboard-button-width: 222rpx !default;
$e-number-keyboard-button-margin: 4px 6rpx !default;
$e-number-keyboard-button-border-top-left-radius: 4px !default;
$e-number-keyboard-button-border-top-right-radius: 4px !default;
$e-number-keyboard-button-border-bottom-left-radius: 4px !default;
$e-number-keyboard-button-border-bottom-right-radius: 4px !default;
$e-number-keyboard-button-height: 90rpx !default;
$e-number-keyboard-button-background-color: #ffffff !default;
$e-number-keyboard-button-box-shadow: 0 2px 0px #bbbcbe !default;
$e-number-keyboard-text-font-size: 20px !default;
$e-number-keyboard-text-font-weight: 500 !default;
$e-number-keyboard-gray-background-color: rgb(200, 202, 210) !default;
$e-number-keyboard-e-hover-class-background-color: #bbbcc6 !default;

@include bem_b(keyboard) {
  @include flex;
  flex-direction: row;
  justify-content: space-around;
  background-color: $e-number-keyboard-background-color;
  flex-wrap: wrap;
  padding: $e-number-keyboard-padding;

  @include bem_e(button-wrapper) {
    box-shadow: $e-number-keyboard-button-box-shadow;
    margin: $e-number-keyboard-button-margin;
    border-top-left-radius: $e-number-keyboard-button-border-top-left-radius;
    border-top-right-radius: $e-number-keyboard-button-border-top-right-radius;
    border-bottom-left-radius: $e-number-keyboard-button-border-bottom-left-radius;
    border-bottom-right-radius: $e-number-keyboard-button-border-bottom-right-radius;

    &__button {
      width: $e-number-keyboard-button-width;
      height: $e-number-keyboard-button-height;
      background-color: $e-number-keyboard-button-background-color;
      @include flex;
      justify-content: center;
      align-items: center;
      border-top-left-radius: $e-number-keyboard-button-border-top-left-radius;
      border-top-right-radius: $e-number-keyboard-button-border-top-right-radius;
      border-bottom-left-radius: $e-number-keyboard-button-border-bottom-left-radius;
      border-bottom-right-radius: $e-number-keyboard-button-border-bottom-right-radius;

      &__text {
        font-size: $e-number-keyboard-text-font-size;
        font-weight: $e-number-keyboard-text-font-weight;
        @include VueAndNvueStyleAttr("color","text-color", "primary");
      }

      &--gray {
        background-color: $e-number-keyboard-gray-background-color;
      }
    }
  }
}

.e-hover-class {
  background-color: $e-number-keyboard-e-hover-class-background-color;
}
